<template>
    <button
        ref="_ref"
        class="xq-button"
        :class="{
            [`xq-button--${type}`]: type,
            [`xq-button--${size}`]: size,
            'is-plain': plain,
            'is-round': round,
            'is-circle': circle,
            'is-disabled': disabled || loading
        }"
        :disabled="disabled || loading"
    >
        <Xq-Icon icon="spinner" spin v-if="loading" />
        <Xq-Icon :icon="icon" v-if="icon" />
        <span v-if="$slots.default">
            <slot />
        </span>

    </button>
</template>

<script setup lang="ts">
import { ref, onMounted, useSlots, useAttrs } from 'vue'

defineOptions({
    name: 'XqButton',
})

interface IProps {
    icon?: string,
    type?: string,
    plain?: boolean,
    round?: boolean,
    disabled?: boolean,
    loading?: boolean,
    size?: string,
    circle?: boolean
}

const props = withDefaults(defineProps<IProps>(), {
    icon: "",
    type: "default",
    plain: false,
    round: false,
    disabled: false,
    loading: false,
    size: '',
    circle: false
})

// 回头通过 _ref 就可以获取到 button 元素
const _ref = ref(null)

defineExpose({
    ref: _ref
})

const slots = useSlots();
const attrs = useAttrs();
onMounted(()=> {
    console.log("slots", slots.default &&  slots.default());
    console.log("attrs", attrs);
    console.log("props", props);
})
</script>

<style lang="scss" scoped></style>
